{include file="common/header" /}
<!-- 中间区域 -->
<div class="top_box" style="background-image:url( {$catTreeList.topCate.logo})">

    <h1>{$catTreeList.topCate.title}</h1>

</div>
<main>
    <div class="product-swiper-box">
        <div class="layui-main d-flex al-c jc-s">
            <div class="prev img_box">
                <img src="/public/home/images/left.png">
            </div>
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    {volist name="product_cats" id="cats"} 
                    <div class="swiper-slide">
                        <a class="item {if isset($cat_id) && $cat_id >0 && $cat_id == $cats.id} layui-this {/if}"  href="/site-List-2-{$cats.id}">
                             <div class="img_box img">
                                <img src="{$cats.icon}">
                            </div>
                            <p>{$cats.title}</p>
                        </a>
                       
                    </div>
                    {/volist}
                </div>
            </div>
            <div class="next img_box">
                <img src="/public/home/images/right.png">
            </div>
        </div>
    </div>

    <section class="pt40">
        <form action="" class="layui-form" onsubmit="return false">
        <div class="layui-main">
            <ul class="mt40 layui-form d-grid grid2 grid-xs1 product-search gap30">
                <li> 
                    <select class="layui-input" lay-filter="category_select" >
                        {if isset($product_cats_childs) && count($product_cats_childs)}
                                <option value="">选择分类</option>
                            {volist name="product_cats_childs" id="childs_cat"} 
                                <option {if isset($child_id) && $child_id == $childs_cat.id} selected {/if} value="/site-List-2-{$cat_id}-{$childs_cat.id}">
                                    {$childs_cat.title}
                                </option>
                            {/volist} 
                        {/if} 
                    </select>
                </li>
                <li>
                    <select class="layui-input" lay-filter="category_select_third" >
                        {if isset($product_cats_third) && count($product_cats_third)}
                                    <option value="">选择分类</option>
                                {volist name="product_cats_third" id="third_cat"} 
                                    <option {if isset($third_id) && $third_id == $third_cat.id} selected {/if} value="/site-List-2-{$cat_id}-{$child_id}-{$third_cat.id}">
                                        {$third_cat.title}
                                    </option>
                                {/volist} 
                        {/if}
                     </select>
                </li>
            </ul>
            <ul class="product-list d-grid grid3 gap40 grid-xs1 mt40">

                {volist name="goods_list" id="goods"}
                <!-- <a href="/index/Article/show/cat_id/{$goods.cat_id}/id/{$goods.id}"> -->
                <a href="/goods-detail-{$goods.id}">
                    <div class="img_100 img1">
                        <img src="{$goods.logo}">
                    </div>
                    <p style=" white-space: normal;text-align: left;">{$goods.title}</p>

                </a> 
                {/volist}
            </ul>


            <div class="pagenum1">

                <div id="demo-laypage-normal-1"></div>
            </div>
        </div>
    </form>
    </section>
</main>


<script src="__ROOT__/public/home/js/index.js"></script>
<script src="__ROOT__/public/home/js/swiper-bundle.min.js"></script>
<script>
    layui.use(function () {
        var laypage = layui.laypage;
        var form    = layui.form
        // 普通用法
        laypage.render({
            elem: 'demo-laypage-normal-1',
            limit: 6,
            curr : {$page},
            count: {$gooods_count},
            jump: function(obj, first){
                // obj 包含了当前分页的所有参数
                let page = obj.curr;

                // 获取当前 URL 和查询参数
                let url = new URL(location.href);
                let params = new URLSearchParams(url.search);

                // 设置或更新 page 参数
                params.set('page', page);

                // 将更新后的参数应用到 URL
                url.search = params.toString();

                // 首次不执行
                if (!first) {
                     // 跳转到新的 URL
                    location.href = url.toString();
                }
            }
        });

        form.on('select(category_select)', function(data){
            let url = data.value
            if (url) {
                window.location.href = url; // 跳转到选择的URL
            }
         }); 
         form.on('select(category_select_third)', function(data){
            let url = data.value
            if (url) {
                window.location.href = url; // 跳转到选择的URL
            }
         });  

    });
    	var swiper = new Swiper(".mySwiper", {
		navigation: {
			nextEl: ".next",
			prevEl: ".prev",
		},
		  
          slidesPerView: 4, // 固定显示 4 个幻灯片
    spaceBetween: 20, // 幻灯片之间的间距为 20px
		autoplay: false,
	});

</script>
{include file="common/footer" /}